<template>
  <div class="nums-wrapper" v-if="Number(value) === 0 || !!Number(value)">
    <span :style="{ top: val }">
        <image class="img" :src="src(item)" v-for="item in arr" :key="'bd' + item" alt="" mode="heightFix">
        <image class="img" :src="src(item)" v-for="item in arr" :key="'be' + item" alt="" mode="heightFix">
        <image class="img" :src="src(item)" v-for="item in arr" :key="'bf' + item" alt="" mode="heightFix">
    </span>
  </div>
  <div class="nums-wrapper nums-wrapper1" style="overflow: visible" v-else>
    <span>
        {{ value }}
    </span>
  </div>
</template>

<script>

export default {
    props: {
        value: {
            type: String,
            default: '0'
        }
    },
    data() {
        return {
            val: '0px',
			arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
    },
    watch: {
        value: {
            handler(v) {
                setTimeout(() => {
                    this.val = this.isPc ? '-' + (this.value * 60 + 1200) + 'px' : '-' + (this.value * 30 + 600) + 'px'
                }, 200)
            },
            immediate: true
        }
    },
    methods: {
        src(v) {
            return `https://static.inclusionconf.com/static/images/num/num${v - 1}.png`
        }
    }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
    .nums-wrapper {
        position: relative;
        height: 60px;
        width: 40px;
        overflow: hidden;

        &.nums-wrapper1 {
            width: 20px;
        }

        span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            transition: 2s;
        }

        img {
            height: 60px;
            width: 40px;
        }
    }
}
@media screen and (max-width: 767px) {
    .nums-wrapper {
        position: relative;
        height: 30px;
        width: 20px;
        overflow: hidden;

        &.nums-wrapper1 {
            width: 10px;
        }

        span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            transition: 2s;
        }

        .img {
            height: 30px;
            width: 20px;
			display: block;
        }
    }
}
</style>
